<template>
  <div class="ybl x">
    <zbl
      :download="download"
      :UpData="updata"
      :buttons="buttons"
      :tree="tree"
      @change="change"
      style="z-index:1"
    />
    <itemTypeA :form="form" :fshow="createItemType" @change="change" />
    <div class="fg1 hf x jc oh">
      <itemList :data="items" :pid="current.id" />
    </div>
    <el-dialog title="导入物料" :visible.sync="show" width="70%">
      <span>批量导入物料将覆盖原有数据,请再次确认.</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="send()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import zbl from "../components/zbl";
import itemTypeA from "../components/create/itemTypeA.vue";
import itemList from "./items";
import XLSX from "xlsx";

export default {
  components: { zbl, itemTypeA, itemList },
  props: [],
  watch: {},
  data() {
    return {
      buttons: [
        {
          id: 1,
          name: "新增分类",
          Attributes: { size: "mini", type: "primary" },
          class: "m10px"
        },
        {
          id: 4,
          name: "修改",
          Attributes: { size: "mini", type: "primary", disabled: true },
          class: "m10px"
        },
        {
          id: 5,
          name: "导出所有数据",
          Attributes: { size: "mini", type: "success" },
          class: "m10px"
        }
      ],
      createItemType: false,
      tree: [],
      form: {},
      defForm: { id: 0, pid: 0, name: "", other: { remarks: "" } },
      current: {},
      items: [],
      download: false,
      updata: {
        event: "change",
        cmd: "updata",
        label: "批量导入"
      },
      show: false,
      inputData: {}
    };
  },
  created() {
    window.addEventListener("resize", this.getHeight);
    this.getHeight();
    this.setTree(this.$gd.itemType);
    this.form = this.$cp(this.defForm);
    this.current = this.$cp(this.defForm);
  },
  methods: {
    getHeight() {
      this.dhf = "min-height: " + (window.innerHeight - 157) + "px;";
    },
    setTree(a) {
      let b = this.$cp(this.$gd.itemType);
      this.tree = b.arr2tree();
    },
    change(a, b, c) {
      let tmp = {};
      if (a > 0 && a < 4) this.form = this.$cp(this.defForm);
      switch (a) {
        case 1: // 新增顶级
          // 前面已经赋值.
          break;
        case 2: // 新增下级
          this.form.pid = this.current.id;
          break;
        case 3: // 新增平级
          this.form.pid = this.current.pid;
          break;
        case 4: // 修改
          this.form = this.current;
          break;
        case 5: // 修改
          this.outPut(this.$gd.items);
          break;
        case 101: // 选中
          this.current = b;
          this.buttons = this.buttons.map(a => {
            if (a.Attributes.disabled) a.Attributes.disabled = false;
            return a;
          });
          this.items = [];
          // for (let i = 0; i < this.$gd.items.length; i++) {
          //   console.log(this.$gd.items[i].pid == this.current.id,this.$gd.items.length);
          //   if (this.$gd.items[i].pid == this.current.id)
          //     this.items.push(this.$gd.items[i]);
          // }
          this.$gd.items.map(a => {
            if (a.pid == this.current.id) this.items.push(a);
          });
          break;
        case 201: // 新增/修改  完毕
          if (c) {
            this.$gd.itemType.push(b);
            this.setTree();
          }
          break;
        case "tree": // tree被改变
          this.$gd.itemType.v2item(b).pid = c;
          this.setTree(this.$gd.itemType);
          this.$post({
            cmd: 1,
            val: {
              token: sessionStorage.token,
              table: "itemType",
              pid: c,
              where: { id: b }
            }
          });
          break;
        case "updata":
          this.selectExcel(b);
          break;

        default:
          break;
      }
      if (a > 0 && a < 5) this.createItemType = !this.createItemType;
    },
    selectExcel(a) {
      let data = a.body;
      let i = 0;
      let t = ["隶属分类", "物料编号", "物料名称", "物料型号"];
      let j = t.length;
      for (i = 0; i < a.header.length; i++) {
        if (t.indexOf(a.header[i]) >= 0) j--;
      }
      if (j) {
        this.$message.error("导入表格数据 表头必须包含 " + JSON.stringify(t));
        return;
      }

      let items = [];
      data.forEach(item => {
        items.push({
          pid: item.隶属分类,
          name: item.物料名称,
          uid: item.物料编号,
          model: item.物料型号
        });
      });
      this.inputData = {
        cmd: 2,
        val: {
          token: sessionStorage.token,
          table: "items",
          items: items
        }
      };
      this.show = true;
    },
    send() {
      this.show = false;
      this.$post(this.inputData, res => {
        if (res.result) {
          this.$gd.items = this.$gd.items.concat(res.result.items);
          this.$gd.itemType = res.result.itemType;
          this.setTree();
          this.$message.success("数据导入成功");
          console.log(this.$cp(res.cf));
        } else {
          this.$message.error("上传失败." + res.error);
          console.log(this.$cp(res));
        }
      });
    },
    outPut(a, FileName = "导出单据.xlsx") {
      console.log(this.$cp(a));
      // return;
      let SheetNames = [];
      let data = {};
      let wscols = [
        { wch: 16 },
        { wch: 32 },
        { wch: 16 },
        { wch: 16 },
        { wch: 16 },
        { wch: 16 },
        { wch: 16 },
        { wch: 16 },
        { wch: 16 },
        { wch: 32 }
      ]; //设置字段宽度

      let ret = {};
      let tmp = [];
      let name = "";
      a.map(b => {
        name = this.$gd.itemType.getItem({ id: b.pid }).name;
        if (!SheetNames.includes(name)) {
          SheetNames.push(name);
          ret[name] = [];
        }
        ret[name].push([
          b.id.toString(),
          b.uid,
          b.name,
          b.model,
          b.other.remarks
        ]);
      });
      SheetNames.map(b => {
        ret[b].unshift(["物料id", "物料号", "物料名称", "型号", "备注"]);
        // let name = "分类_" + a.id;
        // SheetNames.push(name);
        data[b] = XLSX.utils.aoa_to_sheet(ret[b]);
        data[b]["!cols"] = wscols;
      });

      let file = XLSX.utils.book_new();
      file["SheetNames"] = SheetNames;
      file["Sheets"] = data;
      XLSX.writeFile(file, FileName);
    }
  }
};
</script>

<style lang="less" scoped>
.tree,
.zbl {
  background-color: rgb(84, 92, 100);
  color: rgb(11, 179, 245);
}
.el-checkbox {
  color: rgb(11, 179, 245);
  margin: 0px 10px 10px;
}
.tree /deep/ .el-tree-node {
  position: relative;
  // padding-left: 16px;
}
.tree /deep/ .el-tree-node__children {
  padding-left: 16px;
}

.tree /deep/ .el-tree-node :last-child:before {
  height: 38px;
}

.tree /deep/ .el-tree > .el-tree-node:before {
  border-left: none;
}

.tree-container /deep/ .el-tree > .el-tree-node:after {
  border-top: none;
}

.tree /deep/ .el-tree-node:before {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.tree /deep/ .el-tree-node:after {
  content: "";
  left: -4px;
  position: absolute;
  right: auto;
  border-width: 1px;
}

.tree /deep/ .el-tree-node:before {
  border-left: 1px dashed #4386c6;
  bottom: 0px;
  height: 100%;
  top: -26px;
  width: 1px;
}

.tree /deep/ .el-tree-node:after {
  border-top: 1px dashed #4386c6;
  height: 20px;
  top: 12px;
  width: 24px;
}

/* .tree-container {
  //树的parent，样式自定
} */
</style>
